<template>
  <div class="home">
    <swiper :options="options" not-next-click="notNextClick">
      <swiperSlide v-for="(item, index) in carousel" :key="index">
        <img :src="item.pic">
      </swiperSlide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { getHomeInfo } from '@/api'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  data () {
    return {
      carousel: [],
      channels: [],
      recommendChannel: [],
      options: {
        loop: true,
        initialSlide: 1,
        pagination: '.swiper-pagination',
        autoplay: 3000
      }
    }
  },
  created () {
    getHomeInfo().then(data => {
      console.log(data)
      this.carousel = data.carousel
      this.channels = data.channels
      this.recommendChannel = data.recommendChannel
    })
  },
  components: {
    swiper, swiperSlide
  }
}
</script>

<style>
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 5px;
  text-align: right;
  padding-right: 7px;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 2px;
}
.swiper-pagination-bullet {
  width: 9px;
  height: 2px;
  border-radius: 1px;
  border: none;
  background: rgba(236, 236, 236, .4);
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #fff;
}
</style>

